<template>
    <div class="table_pane">
        <div class="table_body">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="username" label="账号" width="180" />
                <el-table-column prop="nodeId" label="数据节点id" width="280" />
                <el-table-column prop="serverName" label="节点名称" width="280" />
                <el-table-column prop="serverNo" label="节点代号" width="150" />
                <el-table-column prop="nodeName" label="节点名称" width="250" />
                <el-table-column fixed="right" label="Operations" min-width="120">
                <template #default>
                    <el-button link type="primary" size="small" @click="handleClick">
                    Detail
                    </el-button>
                    <el-button link type="primary" size="small">Edit</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="page_pane">
                <el-pagination
                    :page-size="tableSize"
                    layout="total, prev, pager, next"
                    :total="tableTotal"
                    @prev-click="prevClick"
                    @next-click="nextClick"
                    @current-change="currentChange"
                />
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive, nextTick } from 'vue';
import { userApi } from '@/api/apis/user';

    const tableData = ref([])
    const tableTotal=ref(0);
    const tableSize=ref(10);
    const currentChange=(num)=>{
        pageData(num);
    }
    //上一页
    const prevClick=(num)=>{
        pageData(num);
    }
    //下一页
    const nextClick=(num)=>{
        pageData(num);
    }
    const pageData=(pageNum)=>{
        userApi.userPage({pageNum:pageNum}).then((res)=>{
            tableData.value=res.data;
            tableTotal.value=res.total;
        })
    }
    nextTick(()=>{
        //获取用户进账信息
        pageData(1);
    })


</script>